<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>角色管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!--添加模态框-->
        <div>
            <el-dialog title="添加角色" :visible.sync="addDialog" width="30%" @close="addClose">
                <el-form ref="addForm" :model="role" label-width="80px" :rules="adddRules" status-icon label-position="top">
                    <el-form-item label="角色名称" prop="roleName">
                        <el-input v-model="role.roleName"></el-input>
                    </el-form-item>
                    <el-form-item label="角色编号" prop="roleCode"
                                  >
                        <el-input v-model.number="role.roleCode"></el-input>
                    </el-form-item>
                    <el-form-item label="权限">
                        <el-tree :data="pList"
                                 accordion="true"
                                 highlight-current
                                 show-checkbox
                                 ref="tree"
                                 node-key="permissionId"
                                 :props="defaultProps"
                                 @check-change="handleCheckChange"></el-tree>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addRule()">立即添加</el-button>
                        <el-button @click="cancle">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
        <!--更新模态框-->
        <div>
            <el-dialog title="更新角色" :visible.sync="modifyDialog" width="30%" @close="modifyClose">
                <el-form ref="modifyForm" :model="role" label-width="80px" :rules="modifyRules" status-icon label-position="top">
                    <el-form-item label="角色ID" v-if="false" >
                        <el-input v-model="role.roleId"></el-input>
                    </el-form-item>
                    <el-form-item label="角色名称" prop="roleName">
                        <el-input v-model="role.roleName"></el-input>
                    </el-form-item>
                    <el-form-item label="角色编号" prop="roleCode">
                        <el-input v-model.number="role.roleCode"></el-input>
                    </el-form-item>
                    <el-form-item label="权限">
                        <el-tree v-if="isModify"
                                 :data="pList"
                                 highlight-current
                                 show-checkbox
                                 ref="tree"
                                 node-key="permissionId"
                                 :props="defaultProps"
                                 @check-change="handleCheckChange"></el-tree>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="modifyRule">立即更新</el-button>
                        <el-button @click="cancle">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
        <el-container style="width: 100%;background: white">
            <!--顶部操作栏-->
            <el-header>
                <div style="width: 500px;background: olivedrab">
                    <div style="margin-top: 15px;width: 300px;float:left;">
                        <el-input placeholder="请输入内容" v-model="roleName" class="input-with-select">
                            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                        </el-input>
                    </div>
                    <div style="float: right;margin-top: 15px">
                        <el-button type="primary" plain @click="addDialog = true">添加角色</el-button>
                    </div>
                </div>
            </el-header>
            <!--主体列表-->
            <el-main>
                <div>
                    <template>
                        <el-table :data="roleList" stripe style="width: 100%" border
                                  :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }">
                            <el-table-column style="margin: 0 auto; width: 20%" type="index"
                                             label="序号"></el-table-column>
                            <el-table-column style="margin: 0 auto; width: 20%" prop="roleId" v-if="false"
                                             label="序号"></el-table-column>
                            <el-table-column style="margin: 0 auto; width: 40%" prop="roleName"
                                             label="姓名"></el-table-column>
                            <el-table-column label="操作" style="width: 40%">
                                <template slot-scope="scope">
                                    <el-button
                                            size="mini"
                                            @click="toModify(scope.row)">编辑
                                    </el-button>
                                    <el-button
                                            size="mini"
                                            type="danger"
                                            @click="remove(scope.row)">删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </div>
            </el-main>
            <!--分页-->
            <el-footer>
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pageNum"
                            :page-sizes="[3, 4, 5, 6]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </el-footer>
        </el-container>
        <div>

        </div>
    </div>
</template>
15007205389
<script>
    export default {
        name: "sysrole",
        data() {
            return {
                roleName: "",
                pList: [],
                roleList: [],
                pageNum: 1,
                pageSize: 3,
                total: 0,
                addDialog: false,
                modifyDialog: false,
                role: { //添加时的角色对象
                    perList: []
                },
                defaultProps: {
                    children: 'permissionList',
                    label: 'permissionName'
                },
                newRolePermission: [],//添加角色类型时选中的权限ID数组
                isModify: false,
                adddRules: {
                    roleName: [
                        {required: true, message: '请输入角色名称', trigger: 'blur'},
                        {min: 3, max: 10, message: '长度在3到10个字符之间', trigger: 'blur'}
                    ],
                    roleCode:[
                        {required: true, message: '请输入角色编号', trigger: 'blur'},
                        {type: 'number', message: '角色编号必须为数字'}
                    ]
                },
                modifyRules:{
                    roleName: [
                        {required: true, message: '请输入角色名称', trigger: 'blur'},
                        {min: 3, max: 10, message: '长度在3到10个字符之间', trigger: 'blur'}
                    ],
                    roleCode:[
                        {required: true, message: '请输入角色编号', trigger: 'blur'},
                        {type: 'number', message: '角色编号必须为数字'}
                    ]
                }
            }

        },

        created() {
            this.search()
            let url = this.$baseUrl + "/permission/list"
            this.axios.get(url).then((res) => {
                this.pList = res.data.data
            })
        },
        methods: {
            //查询
            search() {
                let url = this.$baseUrl + "/role/list"
                this.axios.get(url, {
                    params: {
                        roleName: this.roleName,
                        pageNum: this.pageNum,
                        pageSize: this.pageSize
                    }
                }).then((res) => {
                    this.roleList = res.data.data.list
                    this.pageSize = res.data.data.pageSize
                    this.pageNum = res.data.data.pageNum
                    this.total = res.data.data.total
                })
            },
            //添加
            add() {
                let url = this.$baseUrl + "/role/add"
                this.axios.post(url, JSON.stringify(this.role)).then((res) => {
                    if (res.data.code == 200) {
                        this.$message.success("添加成功")
                        this.role = {
                            perList: []
                        }
                        this.addDialog = false;
                        this.search()
                        this.$refs.tree.setCheckedKeys([])
                    } else {
                        this.$message.error("添加失败")
                    }
                })
            },
            //更新前回显数据
            toModify(row) {
                this.isModify = true
                this.role = []
                this.role.perList = []
                let roleId = row.roleId
                let url = this.$baseUrl + "/role/findRoleVo"
                this.axios.get(url, {
                    params: {
                        roleId: roleId
                    }
                }).then((res) => {
                    this.modifyDialog = true
                    this.role = res.data.data
                    let list = this.role.perList
                    this.$nextTick(() => {
                        this.$refs.tree.setCheckedKeys(list);//获取已经设置的资源后渲染
                    });
                    isModify: false
                })
            },
            modify() {
                let url = this.$baseUrl + "/role/modify"
                this.axios.put(url, JSON.stringify(this.role)).then((res) => {
                    console.log(res);
                    if (res.data.code == 200) {
                        this.$message.success("更新成功")
                        this.role = []
                        this.modifyDialog = false;
                        this.search()
                    } else {
                        this.$message.error("更新失败")
                    }
                })
            },
            //删除
            remove(row) {
                this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let roleId = row.roleId
                    let url = this.$baseUrl + "/role/remove/" + roleId
                    this.axios.delete(url).then((res) => {
                        if (res.data.code == 200) {
                            this.$message.success("删除成功")
                            this.search()
                        } else {
                            this.$message.error("删除失败")
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            //分页
            handleSizeChange(val) {
                this.pageSize = val
                this.search()
            },
            handleCurrentChange(val) {
                this.pageNum = val
                this.search()
            },
            //获取选中的权限ID
            handleCheckChange() {
                let res = this.$refs.tree.getCheckedNodes()//内置的方法，获得选中的ID
                let arr = []
                res.forEach((item) => {
                    arr.push(item.permissionId)
                })
                this.role.perList = this.unique(arr)
            },
            //对权限ID数组进行去重
            unique(arr){
                let newArr = []
                let len = arr.length
                for (let i = 0; i < len; i++) {
                    if(newArr.indexOf(arr[i]) == -1){
                        newArr.push(arr[i])
                    }
                }
                return newArr
            },
            //关闭模态框
            cancle() {
                this.addDialog = false
                this.modifyDialog = false
                this.role = []
                this.role.perList = []
                isModify: false
            },
            addClose(){
                this.$refs.addForm.resetFields()//清除表单数据
                this.role = {}
                this.role.perList = []
            },
            modifyClose(){
                this.$refs.modifyForm.resetFields()//清除表单数据
                this.role = {}
                this.role.perList = []
            },
            addRule(){
                this.$refs.addForm.validate((valid)=>{
                    if(valid){
                        this.add()
                    }else {
                        return ;
                    }
                })
            },
            modifyRule(){
                this.$refs.modifyForm.validate((valid)=>{
                    if(valid){
                        this.modify()
                    }else {
                        return ;
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>